<template>
    <div>

        <el-container >
            <el-aside width="200px" >
                
                <el-menu default-active="/index" router unique-opened text-color="#fff" background-color="#fdbe48" >
                <!-- logo -->
                <div class="box1"><img src="../../assets/img/waimai.png" alt="" class="img">瑞峰尚管理平台</div>
                    <!-- 后台首页 -->
                    <el-menu-item index="/index"><i class="el-icon-house" ></i>后台首页</el-menu-item>
                    <!-- 订单管理 -->
                    <el-menu-item index="/account" ><i class="el-icon-document" ></i>订单管理</el-menu-item>
                    <!-- 商品管理 -->
                    <el-submenu index="/goods">
                        <template slot="title"><i class="el-icon-shopping-bag-1" ></i>商品管理</template>
                        <el-menu-item-group>
                        <el-menu-item index="/goods">商品列表</el-menu-item>
                        <el-menu-item index="/goods/add">添加商品</el-menu-item>
                        <el-menu-item index="/goods/sort">商品分类</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    
                    <!-- 店铺管理 -->
                    <el-menu-item index="/shop"><i class="el-icon-s-shop" ></i>店铺管理</el-menu-item>
                    <!-- 账号管理 -->
                    <el-submenu index="/person">
                        <template slot="title"><i  class="el-icon-s-custom"></i>账号管理</template>
                        <el-menu-item-group>
                        <el-menu-item index="/person">账号列表</el-menu-item>
                        <el-menu-item index="/person/add">添加账号</el-menu-item>
                        <el-menu-item index="/person/password">修改密码</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <!-- 销售统计 -->
                    <el-submenu index="/stat">
                        <template slot="title"><i class="el-icon-s-data"></i>销售统计</template>
                        <el-menu-item-group>
                        <el-menu-item index="/stat">订单统计</el-menu-item>
                        <el-menu-item index="/stat/goods">商品统计</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>



                </el-menu>
            </el-aside>
            <el-container>
                <!-- 标题 -->
                <el-header>
                    <el-breadcrumb separator="/" >
                        <el-breadcrumb-item :to="{ path: '/index' }">管理中心</el-breadcrumb-item>
                        <el-breadcrumb-item><a href="/">首页</a></el-breadcrumb-item>
                        <el-breadcrumb-item>首页</el-breadcrumb-item>
                    </el-breadcrumb>

                <p>欢迎回来，小垃圾<img src="" alt="" class="photo"></p>
                </el-header>
                <!-- 主体 -->
                <el-main><router-view/></el-main>
            </el-container>
        </el-container>
        
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style>
*{
    margin: 0;
    padding: 0;
}
.box1{
    height: 56px;
    width: 100%;
    line-height: 56px;
    font-family: '幼圆';
    position: relative;
    background-color: #ffbc42;
}
.img{
    width: 20px;
    position: absolute;
    top: 19px;
    left: 20px;
}
body{
    height: 100vh;
}

body>div{
    height: 100%;
}
body>div>div{
    height: 100%;
}


/* 引入布局样式 */
.el-container{
    height: 100%;
}
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
    display: flex;
    justify-content: space-between;
  }
  .el-header .photo{
      width: 25px;
      height: 25px;
      border-radius: 50%;
      vertical-align: center;
  }
  .el-breadcrumb__item{
      line-height: 60px;
  }
  .el-aside {
    background-color: #ffbc42;
    color: #333;
    text-align: center;
    line-height: 200px;
    font-family: '幼圆';
    font-weight: bolder;
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
  
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
  .el-menu{
      border: 0;
      overflow-x: hidden;
      overflow-y:auto ;
  }
</style>